<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/wwl/icon/iconfont.css" />
    <link rel="stylesheet" href="../css/wwl/demo.css" />
    <link rel="stylesheet" href="../css/yl/审核.css">
    <title>审批</title>
</head>

<body>
    <nav class="nav-ct">
        <div class="nav-hd">
            <span class="iconfont icon-oabangong"></span>
            <span class="title">办公后台系统</span>
        </div>
        <div class="center">
            <ul class="nav-content">
                <li><a href="./index.html">工作台</a></li>
                <li><a href="">数据大屏</a></li>
                <li><a href="">员工</a></li>
                <li><a href="">组织</a></li>
                <li><a href="">招聘</a></li>
                <li><a href="">考勤</a></li>
                <li><a href="">薪酬</a></li>
                <li><a href="">社保公积金</a></li>
                <li><a href="">绩效</a></li>
                <li><a href="">培训</a></li>
                <li><a href="./审核.html">审批</a></li>
                <li><a href="./权限-用户.html">权限设置</a></li>
            </ul>
        </div>
    </nav>
    <div class="ct-box">
        <div class="nav-ct-2">
            <ul class="nav-ct-menu">
                <li class="title">审批管理
                    <ul>
                        <li><a href="./审核.html">审批工单</a></li>
                       
                    </ul>
                </li>
                <!-- <li class="title">职位体系
                    <ul>
                        <li><a href="">职位管理</a></li>
                        <li><a href="">职位管理</a></li>
                        <li><a href="">职级管理</a></li>
                    </ul>
                </li> -->
            </ul>
        </div>
        <div class="box">
            <div class="title-b">
                <div class="top">
                    <h3>审批工单</h3>
                </div>
                <div class="mid">
                    <span>申请人搜索：</span><input class="input" />
                    <button id="searchBtn">搜索</button><button id="resetBtn">重置</button>
                </div>
            </div>

            <div class="table-box">
                <table class="table">
                    <div class="table-a">
                        <span id="0">全部工单</span>
                        <span id="1">代办工单</span>
                        <span id="2">已办工单</span>
                    </div>
                    <thead class="theadBox">
                        <tr>
                            <th>工单流水号</th>
                            <th>工单标题</th>
                            <th>工单类型</th>
                            <th>申请人</th>
                            <th>审核状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="page-turn-bar">
                    <div id="next">&gt;</div>
                    <div id="pages"></div>
                    <div id="pre">&lt;</div>
                </div>
            </div>
        </div>
        <div id="view">
            <div id="viewBox">
                <div id="view-a">
                    <form>
                        <div class="row"><label class="col-sm-4">工单流水号：</label><input disabled id="ticketSerialNumber"
                                class="col-sm-7" type="text" />
                        </div>
                        <div class="row"><label class="col-sm-4">工单标题：</label><input id="ticketTitle" class="col-sm-7"
                                type="text" />
                        </div>
                        <div class="row"><label class="col-sm-4">工单类型：</label><select id="ticketType" class="col-sm-7">
                                <option value="定薪审核">定薪审核</option>
                                <option value="涨薪审核">涨薪审核</option>
                                <option value="降薪审核">降薪审核</option>
                            </select>
                        </div>
                        <div class="row"><label class="col-sm-4">申请人：</label><input id="applicant" class="col-sm-7"
                                type="text" />
                        </div>
                        <div class="row"><label class="col-sm-4">审核状态：</label><select id="auditStatus" class="col-sm-7">
                                <option value="已审核">已审核</option>
                                <option value="未审核">未审核</option>
                            </select>
                        </div>
                    </form>
                    <div class="row">
                        <span class="col-sm-1"></span>
                        <button class="col-sm-4" id="confirmBtn">确定修改</button>
                        <span class="col-sm-1"></span>
                        <button class="col-sm-4" id="cancelBtn">取消</button>
                    </div>

                </div>
            </div>

        </div>


        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            let data = [
                {
                    ticketSerialNumber: "1",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "张三",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "2",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "张一",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "3",
                    ticketTitle: "定薪审核",
                    ticketType: "涨薪审核",
                    applicant: "张二",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "4",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "李一",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "5",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "张五",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "6",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "张四",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "7",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "李二",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "8",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "李三",
                    auditStatus: "未审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "9",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "李四",
                    auditStatus: "未审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "10",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "李五",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "11",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "王一",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "12",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "王二",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "13",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "王三",
                    auditStatus: "未审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "14",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "王四",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "15",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "王五",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "16",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "阿萨德",
                    auditStatus: "已审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "17",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "萨达",
                    auditStatus: "未审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "18",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "我晚点",
                    auditStatus: "未审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "19",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "打啊",
                    auditStatus: "未审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "20",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "更待何时",
                    auditStatus: "未审核",
                    operate: "点击操作",
                },
                {
                    ticketSerialNumber: "21",
                    ticketTitle: "定薪审核",
                    ticketType: "定薪审核",
                    applicant: "谁搭话",
                    auditStatus: "未审核",
                    operate: "点击操作",
                },
            ];
            let pageSize = 5;
            function renderTable(data, currentPage = 1) {
                // 动态渲染
                renderPaging(data, currentPage);
                const startIndex = pageSize * (currentPage - 1);
                const endIndex = startIndex + pageSize;
                const dataByPaging = data.slice(startIndex, endIndex);
                $(".box tbody").empty();
                for (let i = 0; i < dataByPaging.length; ++i) {
                    let item = dataByPaging[i];
                    $("tbody").append(
                        `<tr><td>${item.ticketSerialNumber}</td><td>${item.ticketTitle}</td><td>${item.ticketType}</td><td>${item.applicant}</td><td>${item.auditStatus}</td><td><a class=viewBtn data-id=${item.ticketSerialNumber}>${item.operate}</a></td></tr >`
                    );
                }
            }
            renderTable(data);
            function renderPaging(data, currentPage = 1) {
                $("#pages").empty();
                let num = Math.ceil(data.length / pageSize);
                for (let i = 1; i <= num; ++i) {
                    $("#pages").append(`<div>${i}</div>`);
                }
                $("#pages div")
                    .eq(currentPage - 1)
                    .addClass("color");
            }
            $("#pages").on("click", "div", function (event) {
                const currentPage = parseInt($(event.target).text());
                console.log(currentPage);
                renderTable(data, currentPage);
            });
            $("#next").on("click", function (event) {
                let currentPage = parseInt($("#pages>.color").text());
                let max = Math.ceil(data.length / pageSize);
                if (currentPage === max) {
                    return;
                }
                renderTable(data, currentPage + 1);
            });
            $("#pre").on("click", function (event) {
                //获取当前下标
                let currentPage = parseInt($("#pages>.color").text());
                if (currentPage === 1) {
                    return;
                }
                renderTable(data, currentPage - 1);
                // console.log(a)
            });
            let arr = [];

            function handleTable(index) {
                $(".table-a>span")
                    .removeClass("tableClass")
                    .eq(index)
                    .addClass("tableClass");
            }
            handleTable(0);
            $(".table-a").on("click", "span", function (event) {
                arr = [];
                // $("#box tbody").empty()
                let target = event.target;
                let index = parseInt(target.id);
                // console.log(index)
                handleTable(index);
                if (index === 0) {
                    renderTable(data);
                    $("#pages").on("click", "div", function (event) {
                        const currentPage = parseInt($(event.target).text());
                        console.log(currentPage);
                        renderTable(data, currentPage);
                    });
                    $("#next").on("click", function (event) {
                        let currentPage = parseInt($("#pages>.color").text());
                        let max = Math.ceil(data.length / pageSize);
                        if (currentPage === max) {
                            return;
                        }
                        renderTable(data, currentPage + 1);
                    });
                    $("#pre").on("click", function (event) {
                        //获取当前下标
                        let currentPage = parseInt($("#pages>.color").text());
                        if (currentPage === 1) {
                            return;
                        }
                        renderTable(data, currentPage - 1);
                        // console.log(a)
                    });
                }
                if (index === 1) {
                    for (let i = 0; i < data.length; ++i) {
                        let item = data[i];
                        if (item.auditStatus === "未审核") {
                            arr.push(item);
                            $("#pages").on("click", "div", function (event) {
                                const currentPage = parseInt($(event.target).text());
                                console.log(currentPage);
                                renderTable(arr, currentPage);
                            });
                            $("#next").on("click", function (event) {
                                let currentPage = parseInt($("#pages>.color").text());
                                let max = Math.ceil(arr.length / pageSize);
                                if (currentPage === max) {
                                    return;
                                }
                                renderTable(arr, currentPage + 1);
                            });
                            $("#pre").on("click", function (event) {
                                //获取当前下标
                                let currentPage = parseInt($("#pages>.color").text());
                                if (currentPage === 1) {
                                    return;
                                }
                                renderTable(arr, currentPage - 1);
                                // console.log(a)
                            });
                        }

                        renderTable(arr);
                        renderPaging(arr, (currentPage = 1));
                    }
                }
                if (index === 2) {
                    for (let i = 0; i < data.length; ++i) {
                        let item = data[i];
                        if (item.auditStatus === "已审核") {
                            arr.push(item);
                            $("#pages").on("click", "div", function (event) {
                                const currentPage = parseInt($(event.target).text());
                                console.log(currentPage);
                                renderTable(arr, currentPage);
                            });
                            $("#next").on("click", function (event) {
                                let currentPage = parseInt($("#pages>.color").text());
                                let max = Math.ceil(arr.length / pageSize);
                                if (currentPage === max) {
                                    return;
                                }
                                renderTable(arr, currentPage + 1);
                            });
                            $("#pre").on("click", function (event) {
                                //获取当前下标
                                let currentPage = parseInt($("#pages>.color").text());
                                if (currentPage === 1) {
                                    return;
                                }
                                renderTable(arr, currentPage - 1);
                                // console.log(a)
                            });
                        }
                        renderTable(arr);
                        renderPaging(arr, (currentPage = 1));
                    }
                }
            });
            let arra = [];
            $("#searchBtn").on("click", function () {
                arra = [];
                let value = $(".input").prop("value").trim();
                // console.log(value)
                if (!value) {
                    renderTable(data);
                    return;
                }
                for (let i = 0; i < data.length; ++i) {
                    let a = data[i].applicant;
                    // console.log(a)
                    if (a.includes(value)) {
                        arra.push(data[i]);
                    }
                }
                renderTable(arra);
            });
            $("#resetBtn").on("click", function () {
                $(".input").val("");
                renderTable(data);
            });

            $(".box tbody").on("click", ".viewBtn", function () {
                const dataId = $(event.target).attr("data-id");
                console.log(dataId, typeof dataId)
                $("#view").show()
                for (let i = 0; i < data.length; ++i) {
                    if (data[i].ticketSerialNumber === dataId) {
                        $("#ticketSerialNumber").val(data[i].ticketSerialNumber)
                        console.log(data[i].ticketSerialNumber, typeof data[i].ticketSerialNumber)
                        $("#ticketTitle").val(data[i].ticketTitle)
                        $("#ticketType").val(data[i].ticketType)
                        console.log(data[i].ticketType)
                        $("#applicant").val(data[i].applicant)
                        $("#auditStatus").val(data[i].auditStatus)
                    }
                }
            })
            $("#cancelBtn").on("click", function () {
                $("#view").hide();
            });

            // 确认修改
            $("#confirmBtn").on("click", (event) => {
                // 获取input的值

                const ticketSerialNumber = $("#ticketSerialNumber").val()
                console.log(ticketSerialNumber)
                const ticketTitle = $("#ticketTitle").val();
                const ticketType = $("#ticketType").val();
                console.log(ticketType)
                const applicant = $("#applicant").val();
                const auditStatus = $("#auditStatus").val();
                // 修改 student
                for (let i = 0; i < data.length; ++i) {
                    const item = data[i];
                    if (item.ticketSerialNumber === ticketSerialNumber) {
                        item.ticketSerialNumber = ticketSerialNumber;
                        item.ticketTitle = ticketTitle;
                        item.ticketType = ticketType;
                        item.applicant = applicant;
                        item.auditStatus = auditStatus;
                    }
                }
                // 重新渲染
                renderTable(data);
                // 隐藏弹窗
                $("#view").hide();
            });
        </script>
</body>

</html>